import { Table } from "antd";
import { ComponentType, DOMAttributes } from "react";
import styled from "styled-components";
import { UpOutlined, DownOutlined } from "@ant-design/icons";

export const StyledOuterTable = styled(Table)`
	.ant-table-cell {
		padding: 8px 8px !important;
	}
	.ant-table-cell-row-hover {
		background-color: #fff !important;
	}
	.ant-table-row {
		.ant-table-cell:nth-child(2) {
			padding: 0 !important;
		}
	}
`;
export const StyledInnerTable = styled(Table)`
	.ant-table {
		margin-inline: initial !important;
	}
	.ant-table-cell {
		border: none !important;
		line-height: 1.2 !important;
	}
`;
export const StyledGoodsFormWrapper = styled.div`
	height: calc(100vh - 230px);
`;
const StyledArrow = (element: ComponentType<{ onClick?: DOMAttributes<HTMLDivElement>["onClick"] }>) => styled(element)`
	padding: 2.5px;
	font-size: 12px;
	font-weight: bold;
	/* border: 1px solid #d9d9d9; */
	border-radius: 50%;
	color: #d9d9d9;
	cursor: pointer;
	&:hover {
		opacity: 1;
		/* border-color: #66a8ff; */
		color: #66a8ff;
	}
`;
export const StyledUpOutlined = StyledArrow(UpOutlined);
export const StyledDownOutlined = StyledArrow(DownOutlined);
export const StyledArrowRow = styled.div`
	height: 22px;
`;